#{extends 'main_bluehat.html' /}
#{set title: 'page.app.manager.adminUser' /}

#{set 'moreTemplates'}
<script id="focus-list-template" type="text/template">
        <div class="well" style="padding: 14px 19px;">
                <button name="add" class="btn primary">Add</button>
        </div>
        <div id="new-focus">
        </div>
        <div class="unstyled list">
        </div>
        <div class="pagination">
                <ul>
                        <li class="prev <%= !pagination.prev ? "disabled" : "" %>"><a <%= pagination.prev ? "class=page" : "" %> data-id="<%= pagination.prev %>">&larr; Previous</a></li>
                        <% for(page in pagination.range) { %>
                                <li <%= pagination.page == pagination.range[page] ? "class=active" : "" %>><a class="page"  data-id="<%= pagination.range[page] %>"><%= pagination.range[page] %></a></li>
                        <% } %>
                        <li class="next <%= !pagination.next ? "disabled" : "" %>"><a <%= pagination.next ? "class=page" : "" %> data-id="<%= pagination.next %>">Next &rarr;</a></li>
                </ul>
                <span>Total:</span> <%= pagination.total ? pagination.total : 0 %>
        </div>
</script>
<script id="focus-item-template" type="text/template">
        <div  class="row">
                <div class="span8 resume">
                        <%= data.get("title") %>
                </div>
                <div class="span1">
                        <a href="#/focus/<%= data.get("id") %>"><%= data.get("countInfoRequest") %></a>
                </div>          
                <div class="span1">
                        <a href="#listideas<%= data.get("id") %>">TODO</a>
                </div>
                <div class="span6 action">
                        <button name="edit" class="btn small edit">Edit</button>
                        <button name="delete" class="btn small delete">Delete</button>
                </div>
                
                <div class="span16 detail">
                        <%= data.get("description") %>
                </div>
        </div>
        <hr/>
</script>
<script id="focus-editor-template" type="text/template">
	 <div id="focus_editor">
     	<form>
        	<fieldset>
            	<legend>Example form legend</legend>
                <div class="clearfix">
                	<label for="focus_title">Title</label>
                        <div class="input">
                        	<input id="focus_title" type="text" value="<%= title ? title : ''%>"/>
                            <span class="help-inline"></span>
                        </div>
                </div>
                <div class="clearfix">
                        <label for="focus_description">Description</label>
                        <div class="input">
                                <textarea id="focus_description" type="text"><%= description ? description : ''%></textarea>
                                <span class="help-inline"></span>
                        </div>
                </div>
				 <div class="clearfix">
                        <label for="focus_participants">Participants</label>
                        <div class="input">
                                <select id="multiSelect" class="medium" disabled="" name="participants" multiple="multiple" size="5">
									<% _.each(participants, function(user) { %>
										<option value="<%= user.id %>" title='<%= user.firstName %> <%= user.lastName %>'><%= user.firstName %> <%= user.lastName %></option>
									<% }); %>
								</select>
                                <span class="help-inline"></span>
								<span class="label" name="manage">Manage</span>
                        </div>
                </div>
                <div class="actions">
                    <a name="save" class="btn primary">Save</a>
                    <a name="back" class="btn">Back</a>
                </div>
			</fieldset>
		<form>
	</div>
</script>

<script id="participants-modal-template" type="text/template">
<div class="modal-header">
	<a href="#" class="close">&times;</a>
    <h3>Participants management</h3>
</div>
<div class="modal-body">
	<form>
		<fieldset>
			<div class="row">
				<div class="span12">
					<div class="row">
						<div class="span4">
							<div class="clearfix">
								<select id="multiSelect" class="medium" name="allUsers" multiple="multiple" size="5">
									<% for(var count=0; count < users.length; count++) { %>
										<option value="<%= users[count].get("id") %>"><%= users[count].get("firstName")  %> <%= users[count].get("lastName")  %></option>
									<% } %>
								</select>
							</div>
						</div>
						<div class="span2">
							<div class="row">
								<a class="btn small add" type="image" src="@{'/public/images/add.jpg'}" name="addParticipant"/>
							</div>
							<div class="row">
								<a class="btn small remove" type="image" src="@{'/public/images/remove.jpg'}" name="removeParticipant" width="5" height="5"/>
							</div>
						</div>
						<div class="span4">
							<div class="clearfix">
								<select id="multiSelect" class="medium" name="participants" multiple="multiple" size="5">
									<% for(var count=0; count < participants.length; count++) { %>
										<option value="<%= participants[count].id %>"><%= participants[count].firstName  %> <%= participants[count].lastName  %></option>
									<% } %>
								</select>
							</div>
						</div>
					</div>
				</div>
			</div>
			
		</fieldset>
	</form>	
</div>
<div class="modal-footer">
	<button name="cancel" class="btn" type="reset">Cancel</button>
	<button name="save" class="btn primary">Save</button>
</div>
</script>


<script id="remove-confirmation-template" type="text/template>
        <div class="confirmation">
                <p>¿Seguro que desea eliminar?</p>
                <p class="description"><%= message ? message : "" %></p>
                <button class="confirm">Confirm</button>
                <button class="cancel">cancel</button>
        </div>
</script>

#{/set}
#{set 'moreScripts'}
	 <script type="text/javascript">
		  var Actions = {
	                focusRoot:                    #{jsAction @bluehat.FocusController.list() /},
	                userRoot:					  #{jsAction @bluehat.UserController.list() /},
	        };
	        
	        $(document).ready(function(){
	            var module = ideon.module("bluehat");
	            var focusCollection = new module.Collection.Focus([], {paginated: true});
	            router = new module.Router.App({focusCollection: focusCollection});
	            Backbone.history.start();
	        });
        </script>
        <script src="@{'/public/javascripts/ideonlab/bluehat.js'}"></script>
#{/set}

<div id="content" class="estilo_inform estilo_intranet">
	BLUEAHT		 aaaa
</div>

